{% extends 'base/base.html' %}

{% block title %}我的盲盒 - 妙趣拾光锦盒{% endblock %}

{% block content %}
<section class="py-5">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="mb-0">我的盲盒</h1>
            <a href="{% url 'order:list' %}" class="btn btn-outline-secondary">
                <i class="fas fa-clipboard-list me-2"></i>我的订单
            </a>
        </div>
        
        {% if boxes %}
        <div class="row">
            {% for box in boxes %}
            <div class="col-md-4 col-lg-3 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="position-relative">
                        <img src="{{ box.image_url }}" class="card-img-top" alt="{{ box.name }}" style="height: 200px; object-fit: cover;">
                        <span class="badge bg-primary position-absolute top-0 end-0 m-2">{{ box.category }}</span>
                    </div>
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">{{ box.name }}</h5>
                        <p class="card-text text-muted small">订单号: {{ box.order_no }}</p>
                        <p class="card-text text-muted small">购买于: {{ box.create_time|date:"Y-m-d" }}</p>
                        <div class="mt-auto pt-3">
                            {% if box.drawn %}
                            <div class="d-flex flex-column gap-2">
                                <div class="alert alert-success mb-0 text-center py-2">
                                    <i class="fas fa-box-open me-2"></i>已开盒
                                </div>
                                <a href="{% url 'order:view_draw_result' order_id=box.order_id item_id=box.item_id %}" class="btn btn-outline-primary w-100">
                                    <i class="fas fa-eye me-2"></i>查看内容
                                </a>
                            </div>
                            {% else %}
                            <a href="{% url 'order:draw_box' order_id=box.order_id item_id=box.item_id %}" class="btn btn-primary w-100 animation-btn">
                                <i class="fas fa-box-open me-2"></i>开盒
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="alert alert-info">
            <i class="fas fa-info-circle me-2"></i>
            您还没有可开的盲盒，只有订单状态为"已发货"或"已完成"的订单中的盲盒才会显示在这里！
            <a href="{% url 'blindbox:list' %}" class="alert-link">去购买盲盒</a>
        </div>
        {% endif %}
    </div>
</section>

<style>
    .animation-btn {
        transition: all 0.3s ease;
    }
    .animation-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
</style>
{% endblock %} 